<template>
  <el-dialog :title="`导出:${templateName}`" width="600px" @close="closeDialog">
    <!-- 这是导出模块 -->
    <div class="export-container">
      <div class="export-demo-box">
        <div>已选择：{{ selectedItems.length }}条数据</div>
        <div class="export-demo-check">
          <div>导出字段：</div>
          <div>
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
              全选
            </el-checkbox>
          </div>
        </div>
      </div>
      <div class="export-demo-checkbox">
        <el-checkbox-group v-model="checkedItem">
          <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
            {{ city }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps<{
  dialogVisible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
  (event: 'ok'): void;
}>();


//从父组件传过来
const templateName = "导出模板的名称"
const selectedItems = [
  {
    "id": 281,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  },
  {
    "id": 280,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  }
]
const cities = ['序号', '姓名', '性别', '年龄', '账号', '密码', '所属部门', '创建时间', '密码', '创建人', '身份证号码'];


// 关闭弹窗
const closeDialog = () => {
  emits('close');
};


// 确定
const confirmUpload = () => {
  //拿到el-checkbox拿到选择的数据并传递
  console.log("已选择的项目:", checkedItem.value);
  emits('ok');

};

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedItem = ref<string[]>([]);

// 全选
const handleCheckAllChange = (val: boolean) => {

};


</script>

<style scoped lang="scss">
.export-container {
  width: 100%;
  height: 100%;
  padding: 0 2%;
  box-sizing: border-box;

  .export-demo-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .export-demo-checkbox {
    border: 1px solid #dcdfe6;
    padding: 0.5rem;
  }

  .el-checkbox {
    width: 6rem;
    display: inline-table;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dialog-footer {
  text-align: center;
}
</style>
